﻿@page "/chart/print"

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.Buttons
@using PointRender

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the print option in the chart.</p>
</SampleDescription>
<ActionDescription>
    <p>By clicking on <code>Print</code>, you can print the chart directly from the browser by calling its public method <code>Print()</code>.</p>
    <p>More information about the print can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-print/#print'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section col-lg-9 sb-property-border" align="center">
    <SfChart @ref="@chartInstance" Title="Sales Comparision" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis Title="Manager" ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Interval="1">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Minimum="0" Maximum="20000" Title="Sales">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
        </ChartPrimaryYAxis>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" XName="Manager" YName="SalesInfo" Type="ChartSeriesType.Column">
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartEvents OnPointRender="PointRender"></ChartEvents>
    </SfChart>
</div>

<div class="col-lg-3 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table style="width: 100%">
                <tbody>
                    <tr style="height: 50px; text-align: center">
                        <td>
                            <SfButton ID="button" @onclick="PrintChart" Content="Print" CssClass="e-flat" IsPrimary="true"></SfButton>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

@code{

    private SfChart chartInstance;
    private Theme Theme { get; set; }
    public List<ExportData> ChartPoints { get; set; } = new List<ExportData>
    {
        new ExportData { Manager = "John", SalesInfo = 10000 },
        new ExportData { Manager = "Jake", SalesInfo = 12000 },
        new ExportData { Manager = "Peter", SalesInfo = 18000 },
        new ExportData { Manager = "James", SalesInfo = 11000 },
        new ExportData { Manager = "Mary", SalesInfo = 9700 }
    };

    protected override void OnInitialized()
    {
        this.SetTheme(null);
    }

    public void PointRender(PointRenderEventArgs args)
    {
        this.SetTheme(args);
    }

    private void SetTheme(PointRenderEventArgs args)
    {
        if (NavigationManager.Uri.IndexOf("material") > -1)
        {
            if (args == null)
                Theme = Theme.Material;
            else
                args.Fill = PointColor.MaterialColors[args.Point.Index % 10];
        }
        else if (NavigationManager.Uri.IndexOf("fabric") > -1)
        {
            if (args == null)
                Theme = Theme.Fabric;
            else
                args.Fill = PointColor.FabricColors[args.Point.Index % 10];
        }
        else if (NavigationManager.Uri.IndexOf("bootstrap") > -1)
        {
            if (args == null)
                Theme = Theme.Bootstrap;
            else
                args.Fill = PointColor.BootstrapColors[args.Point.Index % 10];
        }
        else if (NavigationManager.Uri.IndexOf("highcontrast") > -1)
        {
            if (args == null)
                Theme = Theme.HighContrast;
            else
                args.Fill = PointColor.HighContrastColors[args.Point.Index % 10];
        }
        else
        {
            if (args == null)
                Theme = Theme.Bootstrap4;
            else
                args.Fill = PointColor.BootstrapColors[args.Point.Index % 10];
        }
    }

    public async Task PrintChart(MouseEventArgs args)
    {
        await chartInstance.PrintAsync();
    }

    public class ExportData
    {
        public string Manager { get; set; }
        public double SalesInfo { get; set; }
    }

}

